<template>
	<view>
		<view class="lunb">
			<swiper autoplay style="margin-bottom:30px;">
				<swiper-item style="height: 250px;" v-for="item in commodity.commodityimgs">
					<image :src="item.pash" style="width:100%; height:250px;"></image>
				</swiper-item>
				<!-- <swiper-item>
					<image src="../../static/indeimg/lunbo2.png" style="width:100%; height:120px;"></image>
				</swiper-item> -->
			</swiper>
		</view>
		<view class="jc">
			<view style="width: 330px;margin-left: 25px;">
				<span style="color: #333333;font-size: 14.5px;"><b>{{commodity.commodityName}}</b></span>
				<br>
			</view>
			<view style="width: 330px;margin-left: 25px;margin-top: 10px;">
				<span style="font-size: 19px;color: #FF6E8F;"><b>{{commodity.price}}币</b></span>
			</view>
		</view>
		<view style="width: 100%;height: 10px; background-color: #ECFDFA;"></view>
		<view class="fu">
			<view style="width: 4px;height: 17px;background-color: #FF6E8F;margin-left: 20px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
			<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>服务详情</b></span>
			<view style="width: 100%;height: 25px;background-color: #FFFFFF;margin-top: 10px;">
				<span style="color: #333333;font-size: 15px;margin-left: 20px;"><b>服务</b></span>
				<span style="color: #333333;font-size: 15px;margin-left: 45px;"><b>{{commodity.services}}</b></span>
			</view>
			<view style="width: 100%;height: 25px;background-color: #FFFFFF;margin-top: 15px;">
				<span style="color: #333333;font-size: 15px;margin-left: 20px;"><b>说明</b></span>
				<span style="color: #333333;font-size: 15px;margin-left: 45px;"><b>{{commodity.explain}}</b></span>
			</view>
			<view style="width: 100%;height: 25px;background-color: #FFFFFF;margin-top: 15px;">
				<span style="color: #333333;font-size: 15px;margin-left: 20px;"><b>选择</b></span>
				<span style="color: #FF6E8F;font-size: 15px;margin-left: 45px;"><b>{{sptype}}</b></span>
			</view>
		</view>
		<view style="width: 100%;height: 10px; background-color: #ECFDFA;"></view>
		<view class="fu">
			<view style="width: 4px;height: 17px;background-color: #FF6E8F;margin-left: 20px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
			<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>商品参数</b></span>
			<view style="width: 100%;height: 25px;background-color: #FFFFFF;margin-top: 10px;">
				<span style="color: #333333;font-size: 15px;margin-left: 20px;"><b>件数</b></span>
				<span style="color: #333333;font-size: 15px;margin-left: 45px;"><b>{{count}}</b></span>
			</view>
			<view style="width: 100%;height: 25px;background-color: #FFFFFF;margin-top: 15px;">
				<span style="color: #333333;font-size: 15px;margin-left: 20px;"><b>材质</b></span>
				<span style="color: #333333;font-size: 15px;margin-left: 45px;"><b>{{commodity.rawMaterial}}</b></span>
			</view>
			<view style="width: 100%;height: 25px;background-color: #FFFFFF;margin-top: 15px;">
				<span style="color: #333333;font-size: 15px;margin-left: 20px;"><b>风格</b></span>
				<span style="color: #FF6E8F;font-size: 15px;margin-left: 45px;"><b>{{commodity.style}}</b></span>
			</view>
		</view>
		<view style="width: 100%;height: 10px; background-color: #ECFDFA;"></view>
		<view class="fu1">
			<view style="width: 4px;height: 17px;background-color: #FF6E8F;margin-left: 20px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
			<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>商品详情</b></span>
			<view v-for="(item,index) in commodity.commodityimgs" style="width: 100%;height: 100%;background-color: #FFFFFF;margin-top: 10px;">
				<image :src="item.pash"></image>
			</view>
		</view>
		<view style="width: 100%;height: 10px; background-color: #ECFDFA;"></view>
		<view class="fu2">
			<view style="width: 4px;height: 17px;background-color: #FF6E8F;margin-left: 20px;margin-top: 10px;border-radius: 15px;display: inline-block"></view>
			<span style="margin-left: 12px;font-size: 15px;color: #333333;"><b>猜你喜欢</b></span>
			<view style="width: 100%;height: 25px;background-color: #FFFFFF;margin-top: 10px;">
				<view class="sp" v-for="item in cai">
					<image @click="gotospxq(item.commodityId)" :src="item.commodityimgs[0].pash" style="width: 160px;height: 170px;border-radius: 10px;"></image>
					<span style="font-size: 14px;color: #333333;margin-left: 10px;">{{item.commodityName}}</span>
					<br>
					<span style="font-size: 14px;color: #333333;margin-left: 10px;"><b>{{item.price}}币</b></span>
				</view>
			</view>
		</view>
		<view class="db">
			<view style="width: 50%;height: 75px;background-color: #FFFFFF;">
				<view style="width: 50%;height: 75px;display: inline-block;">
					<image @click="open2(0)" src="../../static/scimg/gwc.png" style="width: 25px;height: 25px;margin-left: 33px;margin-top: 25px;"></image>
				</view>
				<view style="width: 50%;height: 75px;display: inline-block;margin-left: 94px;position: relative;top:-75px">
					<image v-if="sc==0" @click="addsc()" src="../../static/scimg/xx.png" style="width: 25px;height: 25px;margin-left: 33px;margin-top: 25px;"></image>
					<image v-if="sc==1" @click="delsc()" src="../../static/scimg/xx1.png" style="width: 25px;height: 25px;margin-left: 33px;margin-top: 25px;"></image>
				</view>
			</view>
			<view style="width: 50%;height: 75px;display: inline-block;position: relative;top: -75px;margin-left: 188px;">
				<span @click="open2(1)" style="font-size: 16px;color: #FFFFFF;margin-left: 60px;position: relative;top: 30px;"><b>立即购买</b></span>
			</view>
		</view>
		<uni-popup ref="popup2" :mask-click="false">
			<view style="width: 100%;height: 400px;background-color: #FFFFFF;">
				<view style="margin-left: 10px;"><image :src="commodity.commodityimgs[0].pash" style="width: 110px;height: 100px;border-radius: 10px;"></image></view>
				<view style="margin-left: 130px;position: relative;top: -100px;"><span style="font-size: 19px;color: #FF6E8F;"><b>{{commodity.price}}币</b></span></view>
				<view style="margin-left: 130px;position: relative;top: -90px;color: #CCCCCC;font-size: 13px;"><span>库存{{countdan}}件</span></view>
				<view style="margin-left: 130px;position: relative;top: -75px;color: #CCCCCC;font-size: 13px;"><span>已选 '{{sptype}}'</span></view>
				<view @click="close2" style="margin-left: 320px;position: relative;top: -150px;"><image src="../../static/scimg/cuohao.png" style="width: 35px;height: 35px;"></image></view>
				<view style="margin-left: 25px;position: relative;top: -50px;color: #333333;font-size: 16px;"><span><b>商品分类</b></span></view>
				<view class="lblist">
					<view v-for="item in commodity.selections" @click="choice(item.selectionId,item.stock,item.selectionName)" style="width: 75px;height: 40px;background-color: #3ED2E2;border-radius: 10px;float: left;margin-left: 15px;">
						<span style="color: #FFFFFF;font-size: 14px;position: relative;top: 7px;">{{item.selectionName}}</span>
					</view>
				</view>
				<image src="../../static/scimg/xhx.png" style="width: 100%; height: 2px;position: relative;top: -15px;"></image>
				<view style="width: 100%;height: 50px;;">
					<span style="color: #333333;font-size: 15px;">购买数量</span>
					<u-number-box style="margin-left: 250px;margin-top: -20px;" v-model="sum" @change="valChange" buttonSize="20px"></u-number-box>
				</view>
				<image src="../../static/scimg/xhx.png" style="width: 100%; height: 2px;position: relative;top: -15px;"></image>
				<u-button v-if="gwcandgm==0" @click="addgwc" color="#5AEAD7" style="width: 250px;height: 35px;border-radius: 20px;" text="加入购物车"></u-button>
				<u-button v-if="gwcandgm==1" @click="addorder" color="#5AEAD7" style="width: 250px;height: 35px;border-radius: 20px;" text="立即购买"></u-button>
<!-- 				<button @click="close2">取消</button> -->
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commodityid:0,
				commodity:{},
				userid:'',
				cai:[],
				sptype:'',
				count:0,
				typename:'',
				countdan:0,
				selectionId:0,
				sum:1,
				sc:0,
				gwcandgm:0,
				union:{
					commodity:{},
					sum:1,
					price:0,
					sptype:'',
					sptypeid:0,
				},
				
			}
		},
		onLoad() {
			this.commodityid=this.$route.query.commodityid
			this.initspxq()
		},
		methods: {
			gotospxq(commodityid){
				uni.navigateTo({
					url:'../shangcheng/spxq?commodityid='+commodityid
				})
			},
			addorder(){
				if(this.userid==''){
					console.log("未登录")
				}else{
				// 	uni.request({
				// 	url:'http://localhost:9525/xkuser/ljp/addorder',
				// 	method: 'GET',
				//    data: {
				// 	   userid: this.userid,
				// 	   commodityid: this.commodityid,
				// 	   selectionId:this.selectionId,
				// 	   sum:this.sum,
				// 	   price:this.commodity.price*this.sum,


				//    },
				//    dataType:'json',
				//    success: (res) => {
				// 		var result = res.data.message;
				// 		console.log(result)
				// 		this.cai=res.data.data.cai;
				// 		this.close2()

				// 	},
				// })
				this.union.commodity=this.commodity
				this.union.sum=this.sum
				this.union.price=this.commodity.price*this.sum
				this.union.sptype=this.sptype
				this.union.sptypeid=this.selectionId
				uni.navigateTo({
					url:'./djjs?union='+encodeURIComponent(JSON.stringify(this.union))
				})
				
				
				}
			},
			delsc(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/delsc',
					method: 'GET',
				   data: {
					   userid: this.userid,
					   commodityid: this.commodityid,
				   },
				   dataType:'json',
				   success: (res) => {
						var result = res.data.message;
						console.log(result)
						this.sc=0
							
					},
				})	
			},
			addsc(){
				if(this.userid==''){
					console.log("未登录")
				}else{
					uni.request({
					url:'http://localhost:9525/xkuser/ljp/addsc',
					method: 'GET',
				   data: {
					   userid: this.userid,
					   commodityid: this.commodityid,
				   },
				   dataType:'json',
				   success: (res) => {
						var result = res.data.message;
						console.log(result)
						this.sc=1
							
					},
				})	
				}
			},
			addgwc(){
				if(this.userid==''){
					console.log("未登录")
				}else{
					uni.request({
					url:'http://localhost:9525/xkuser/ljp/addgwc',
					method: 'GET',
				   data: {
					   userid: this.userid,
					   commodityid: this.commodityid,
					   selectionId:this.selectionId,
					   sum:this.sum,
					   price:this.commodity.price*this.sum,
					   
					   
				   },
				   dataType:'json',
				   success: (res) => {
						var result = res.data.message;
						console.log(result)
						this.cai=res.data.data.cai;
						this.close2()
							
					},
				})	
				}
				
			},
			valChange(e) {
							console.log('当前值为: ' + e.value)
						},
			choice(selectionId,stock,selectionName){
				this.sptype=selectionName
				this.countdan=stock
				this.selectionId=selectionId
				
			},
			open2(gwcandgm) {
				this.gwcandgm=gwcandgm
				this.$refs.popup2.open('bottom')
			},
			close2() {
				this.$refs.popup2.close()
			},
			gwc(){
				
			},
			getguesslike(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getguesslike',
					method: 'GET',
				   data: {
					   userid: this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						var result = res.data.message;
						console.log(result)
						this.cai=res.data.data.cai;
							
					},
				})	
			},
			getissc(){
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/getissc',
					method: 'GET',
				   data: {
					   userid: this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						var result = res.data.message;
						console.log(res)
						for(var i=0;i<res.data.data.sc.length;i++){
							if(res.data.data.sc[i].commodityId == this.commodityid){
								this.sc=1
							}
						}
							
					},
				})	
			},
			initspxq(){
				
				uni.getStorage({
					key:'userid',
					success: res=>{
						this.userid=res.data
					}
				})
				uni.request({
					url:'http://localhost:9525/xkuser/ljp/initspxq',
					method: 'GET',
				   data: {
					   commodityid: this.commodityid,
					   userid:this.userid,
				   },
				   dataType:'json',
				   success: (res) => {
						var result = res.data.message;
						console.log(result)
						this.commodity=res.data.data.commodity;
						this.sptype=this.commodity.selections[0].selectionName
						for(var i=0;i<this.commodity.selections.length;i++){
							this.count=this.count+this.commodity.selections[i].stock
						}
						this.countdan=this.commodity.selections[0].stock
						this.selectionId=this.commodity.selections[0].selectionId
						// this.typename=this.commodity.selections[0].
						this.getguesslike()
						if(this.userid !=''){
							this.getissc()
						}
							
					},
				})	
			}
		}
	}
</script>

<style>
	.lblist{
		width: 100%;
		height: 60px;
		background-color: #FFFFFF;
		margin-top: -40px;
	}
	.sp{
		width: 160px;
		height: 230px;
		background-color: #FFFFFF;
		border-radius: 10px;
		float: left;
		margin-left: 7px;
		margin-top: 15px;
		box-shadow: 2px 2px 10px #909090;
	}
	.fu2{
		width: 100%;
		height: 500px;
		background-color: #FFFFFF;
	}
	.fu1{
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}
	.fu{
		width: 100%;
		height: 160px;
		background-color: #FFFFFF;
	}
	.jc{
		width: 100%;
		height: 90px;
		background-color: #FFFFFF;
	}
	.db{
		width: 100%;
		height: 75px;
		background-color: #3ED2E2;
		position: fixed;
		top: 750px;
		box-shadow: 2px 2px 10px #909090;
	}
	.lunb{
		width: 100%;
		height: 250px;
		background-color: #F3A73F;
	}
</style>
